<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <script src="js/axios.min.js"></script>
    <title>微博-情绪分析</title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://www.unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://www.unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/ir_weibo.css"/>
    <link rel="icon" href="https://weibo.com/favicon.ico">

    <!-- 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap" rel="stylesheet">
    -->
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="!search_mode">
            <div class="icon-and-title">
                <div class="icon"> <svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 404 323" class="Logo_main_2QxW2"><g fill="none"><!----><g><path d="M29.136 219.44c0 45.849 59.707 83.045 133.364 83.045 73.657 0 133.363-37.197 133.363-83.045 0-45.859-59.707-83.045-133.364-83.045-73.656 0-133.363 37.186-133.363 83.045" fill="#FEFEFE"></path><path d="M165.616 295.712c-65.199 6.433-121.469-23.032-125.714-65.833-4.234-42.791 45.204-82.708 110.383-89.151 65.209-6.453 121.469 23.011 125.714 65.802 4.213 42.812-45.195 82.729-110.383 89.182m130.387-142.077c-5.553-1.657-9.358-2.782-6.443-10.084 6.29-15.811 6.934-29.465.123-39.191-12.794-18.276-47.772-17.284-87.862-.501 0-.01-12.59 5.512-9.368-4.469 6.177-19.831 5.236-36.44-4.357-46.023-21.743-21.764-79.599.818-129.201 50.4C21.75 140.933.18 180.308.18 214.344c0 65.117 83.516 104.707 165.211 104.707 107.1 0 178.343-62.213 178.343-111.62 0-29.854-25.139-46.79-47.731-53.796" fill="#D52C2B"></path><path d="M367.124 34.465c-25.865-28.677-64.023-39.61-99.235-32.124h-.01c-8.141 1.749-13.336 9.757-11.598 17.888 1.728 8.151 9.747 13.357 17.898 11.608 25.057-5.318 52.159 2.465 70.558 22.827 18.348 20.373 23.349 48.16 15.484 72.511v.01c-2.567 7.926 1.769 16.415 9.716 18.982 7.916 2.557 16.425-1.78 18.992-9.695v-.051c11.045-34.262 4.05-73.31-21.805-101.956" fill="#E79115"></path><path d="M327.396 70.305c-12.59-13.96-31.162-19.268-48.324-15.617-7.016 1.493-11.495 8.397-9.972 15.412 1.483 6.985 8.386 11.485 15.372 9.961v.02c8.407-1.78 17.489.808 23.645 7.609 6.167 6.832 7.814 16.139 5.165 24.3h.02c-2.199 6.811 1.534 14.144 8.345 16.353 6.832 2.178 14.144-1.544 16.343-8.366 5.392-16.689 2.017-35.711-10.594-49.672" fill="#E79115"></path><path d="M169.206 218.197c-2.27 3.897-7.312 5.768-11.27 4.142-3.886-1.595-5.103-5.942-2.884-9.788 2.27-3.805 7.108-5.666 10.984-4.122 3.937 1.433 5.349 5.841 3.17 9.768m-20.761 26.672c-6.32 10.043-19.82 14.451-29.986 9.818-10.023-4.561-12.978-16.251-6.678-26.059 6.218-9.777 19.278-14.124 29.373-9.89 10.216 4.358 13.468 15.955 7.291 26.131m23.676-71.202c-31.019-8.08-66.089 7.384-79.558 34.732-13.725 27.869-.45 58.817 30.897 68.942 32.451 10.462 70.722-5.584 84.037-35.663 13.112-29.423-3.273-59.716-35.376-68.011" fill="#060101"></path></g></g></svg></div>
                <div class="icon-right">
                    <div class="title">微博情感分析</div>
                    <div class="title-url">weibo.com</div>
                </div>
                
            </div>
            <div :class="has_relation ? 'search-relation' : 'search-relation2' "> 
                <div :class="has_relation ? 'search-box2' : 'search-box' ">
                    <div class="search-content">
                        <input type="text" v-model="query" class="search-input"/>
                    </div>
                    <div class="search-btn" @click="search">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#9a9a9a" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                    </div>
                </div>
                <div class="split_line" v-if="has_relation"></div>
                <div class="relation-item" v-for="(item, index) in relation_list" @click="suggest(index)" :class="index == relation_list_len - 1 ? 'last_item':''">{{item}}</div>
            </div>
        </div>
        <div v-if="search_mode" class="search_win">
            <div class="query-item">
                <div class="query-word">{{queryItem}}</div>
                <div class="query-quit" @click="quitSearchMode">✕</div>
            </div>
            <div class="split"></div>
            <div class="mblog-container"> 
                <div class="left">
                    <div class="graph-title">Sentiment analysis for #<span style="font-weight: 600;">{{queryItem}}</span>#</div>
                    
                    <div class="graph">
                        <div id="container2" style="width: 320px;height:200px;"></div>
                        <div id="container" style="width: 330px;height:200px;"></div>    
                    </div>

                    <div class="graph-title" v-if="no_need_change == 0">Emotional changes about #<span style="font-weight: 600;">{{queryItem}}</span>#</div>
                    <div class="changes" v-if="no_need_change == 0">
                        <div class="changes_not" v-if="!has_changes_res">正在分析情感变化结果 ...</div>
                        <div class="changes_yes" v-if="has_changes_res">
                            <div class="change_detail" v-for="stime in stimes">从 <span style="color: rgba(234,67,53,1); background-color: #f3d5d4; ">{{stime[0]}}时</span> 到 <span style="color: rgba(234,67,53,1); background-color: #f3d5d4; ">{{stime[1]}}时</span> 集中出现较多负面情绪</div>
                            <div class="no_res" v-if="change_no_res">未发现集中出现的负面情绪。</div>
                        </div>
                    </div>



                    <div class="mblog-title">Mblogs about #<span style="font-weight: 600;">{{queryItem}}</span>#</div>
                    <div class="info-and-set">
                        <div class="info">找到相关结果 {{resNum}} 条，耗时 {{wastedTime}} 秒</div>
                        <div class="set">
                            <p class="set-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                    <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                                    <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                                </svg>
                            </p>
                            <p class="set-text">
                                检索设置
                            </p>
                        </div>
                    </div>
                    
                    <div class="mblog" v-for="(item, index) in mblogs" >
                        <div class="text"><span v-if="item.sentiment == 1" class="mblog_pos">正面=> </span><span v-if="item.sentiment == -1" class="mblog_neg">负面=> </span><span v-if="item.sentiment == 500" class="mblog_neu">未知=> </span>@<span style="text-decoration: underline;">{{item.user_name}}</span>：<span v-html="item.text"></span><span class="showpic" v-if="item.show_pic && item.pic_num > 0" @click="showPicture(index)">收起</span> <span class="showpic" v-if="!item.show_pic && item.pic_num > 0" @click="showPicture(index)">展开</span><a v-if="item.is_video" :href="item.video_url" target="_blank">查看视频</a></div>
                        <div class="mblog-info">
                            <div class="date">发布于 {{item.created_at}}</div>
                        </div>
                        <div class="pics" v-if="item.show_pic && item.pic_num > 0">
                            <div class="pic" v-for="pic_url in item.pic_infos">
                                <img class="mblog-img" :src="pic_url"/>
                            </div>
                        </div>
                    </div>

                    <div class="related_search" v-if="showRelatedSearch">
                        <div class="graph-title">Related search about #<span style="font-weight: 600;">{{queryItem}}</span>#</div>
                        <div class="related-items">
                            <div class="related-item" v-for="(item, index) in relatedItem" ><i class="el-icon-search"></i>&emsp;<span class="item-text" @click="relatedSearch(index)">{{item.item_title}}</span></div>
                        </div>
                    </div>

                    <div class="pagination">
                        <div class="block">
                            <el-pagination
                                @current-change="handleCurrentChange"
                                layout="prev, pager, next"
                                :total="totalPage">
                            </el-pagination>
                        </div>
                    </div>

                
                
                </div>
                <div class="right" v-if="showRight">
                    <div class="head">
                        <div class="right-title">Weibo hot search</div>
                    </div>
                    <div class="hotSearch">
                        <div class="hot" v-for="(item, index) in hotSearch">
                            <div class="rank rank1color" v-if="item.rank == 1">{{item.rank}}</div>
                            <div class="rank rank2color" v-if="item.rank == 2">{{item.rank}}</div>
                            <div class="rank rank3color" v-if="item.rank == 3">{{item.rank}}</div>
                            <div class="rank ranknormal" v-if="item.rank > 3">{{item.rank}}</div>
                            <div class="hot-text">{{item.hot_text}}</div>
                            <div class="hot-num">{{item.hot_num}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/ir_weibo.js"></script>
    <script type="text/javascript">
            
    </script>
</body>
</html>
